<template>
  <div
    class="render-collapse-container"
    :id="widget.key"
		:data-type="widget.type"
    :style="wrapStyle"
	>
    <sg-collapse
      lineStyle
      :class="styleType"
      :value="collapseStatus"
      ref="sgCollapse"
    >
			<sg-collapse-item
				v-for="(collapse, index) in widget.data"
				:name="collapse.name"
				:title="widget.options.title"
				:key="index"
			>
				<span class="collapseTitle" slot="title">
					<span class="collapseTitleCopy">
						<span>{{widget.options.title}}</span>
					</span>
				</span>

				<div :style="collapseStyle">
					<template v-for="item in collapse.list">
						<render-form-item
							:key="item.key"
							:widget="item"
						/>
					</template>
				</div>
			</sg-collapse-item>
    </sg-collapse>
  </div>
</template>

<script>
import ContainerMixin from '../mixins/container'

export default {
  name: 'RenderCollapse',
  mixins: [ContainerMixin],
  data(){
    return {
      collapse: '1'
    }
  },
  computed:{
    collapseStyle() {
      const { height, heightUnit } = this.widget.options
      const style = {}

      if (height > 30) {
        style.height = `${height - 30}${heightUnit}`
        style.overflow = 'auto'
      }
      return style
    },
    wrapStyle() {
      const { options } = this.widget
      const { width, widthUnit } = options
      const style = {
        width: width ? `${width}${widthUnit}` : '100%'
      }
      return style
    },
    styleType() {
      const { styleType } = this.widget.options
      return `styleType${styleType}`
    },
    collapseStatus() {
      let status = ''
      if(!('collapseStatus' in this.widget.options) || this.widget.options.collapseStatus) {
        status = this.collapse
      }
      return status
    }
  },
  mounted() {
    this.setMarginStyle()
  },
  methods:{
    setMarginStyle() {
      const { options } = this.widget
      const dom = this.$refs.sgCollapse.$el.children
      const marginData = {
        titleMarginTop: 'marginTop',
        titleMarginRight: 'marginRight',
        titleMarginBottom: 'marginBottom',
        titleMarginLeft: 'marginLeft'
      } // 标题边距数据
      Object.keys(marginData)
        .forEach(key => {
          const value = options[key]
          if (value) {
            const hasUnit = /px/.test(value)
            dom[0].children[1].style[marginData[key]] = hasUnit ? value : value + 'px'
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.render-collapse-container {
	position: relative;
	.sg-collapse {
		border: 1px solid #dfdfdf;
		/deep/.sg-collapse-item {
			border: none;
			.sg-collapse-header {
				height: 30px;
				line-height: 30px;
				font-weight: normal;
				font-size: 14px;
				.sg-collapse-arrow {
					margin-right: 20px;
				}
			}
			.sg-collapse-content {
				padding: 0;
				.sg-collapse-content-box{
					padding: 0;
				}
			}
		}
		/deep/.sg-collapse-item-active {
			.line-style {
				display: none;
			}
		}
	}
	/deep/.styleType1 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				padding-left: 20px;
				border-top:1px solid #404040;
				background-color: #f3f3f3;
				color: #404040;
				font-weight: bold;
			}
		}
	}
	/deep/.styleType2{
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #404040;
				background:url('~@/assets/images/rhombus.png') no-repeat;
				background-position: 3px 50%;
				padding-left: 20px;
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}
	/deep/.styleType0 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #fff;
				font-weight: bold;
				padding:0 10px 0 20px;
				.collapseTitle {
					display: inline-block;
					width: 100%;
					height: 100%;
					background: #f3f3f3;
					transform:skew(-20deg);
					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: -14px;
						width: 8px;
						height: 100%;
						background-color: #3b86e0;
					}
					.collapseTitleCopy {
						display: inline-block;
						height: 100%;
						background-color: #3b86e0;
						span{
							display: inline-block;
							height: 100%;
							transform:skew(20deg);
							padding: 0 20px 0 10px;
						}
					}
				}
			}
		}
	}
	/deep/.styleType3 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #3b86e0;
				padding-left:10px;
				.collapseTitle {
					display: inline-block;
					height: 90%;
					border-bottom: 2px solid #3b86e0;
					padding: 0 10px;
				}
			}
		}
	}
	/deep/.styleType4 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				font-weight: bold;
				color: #404040;
				padding-left:10px;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
					left: 0;
					width: 2px;
					height: 15px;
					background-color: #3b86e0;
				}
			}
		}
	}
	/deep/.styleType5 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #404040;
				background: url('~@/assets/images/rhombus.png') no-repeat;
				background-position: 3px 50%;
				padding-left: 20px;
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}
	/deep/.styleType6 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #fff;
				font-weight: bold;
				padding:0 10px 0 20px;
				.collapseTitle {
					display: inline-block;
					width: 100%;
					height: 100%;
					transform:skew(-20deg);
					&::before {
						content: "";
						position: absolute;
						top: 0;
						left: -14px;
						width: 8px;
						height: 100%;
						background-color: #1797cd;
					}
					.collapseTitleCopy {
						display: inline-block;
						height: 100%;
						background-color: #1797cd;
						span{
							display: inline-block;
							height: 100%;
							transform:skew(20deg);
							padding: 0 20px 0 10px;
						}
					}
				}
			}
		}
	}
	/deep/.styleType7 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #404040;
				font-weight: bold;
				.collapseTitle {
					display: inline-block;
					width: 100%;
					height: 100%;
					position: relative;
					border-bottom: 1px solid #1797cd;
				}
			}
		}
	}
	/deep/.styleType8 {
		>.sg-collapse-item {
			>.sg-collapse-header {
				color: #404040;
				padding:0 0 0 10px !important;
				font-weight: bold;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
					left: 0;
					width: 2px;
					height: 15px;
					background-color: #3b86e0;
				}
			}
		}
	}
	.widget-form-list {
		margin: 0;
	}
}
</style>
